import React, { Component } from 'react';
import { getMultiLang, createPage, toast, base, promptBox  } from 'nc-lightapp-front';
import _ from 'lodash-es';
import config from './config';

import {
    onPageButtonClick,
    onTableInnerButtonClick,
} from './events';
import api from '../../common/api';
import TradeTypeModal from '../../components/trade-type-modal';
import DetailAdjustment from '../../components/detail-adjustment';
import { setSearch } from 'src/erm/sscrppublic/common/utils/setComponentUsed'
import SearchArea from '../../components/search-area';
import TableArea from '../../components/table-area';
import OrderTableArea from '../../components/order-table-area';
import UploadInvoice from '../../components/UploadInvoice';
import OrderDetailAdjustment from '../../components/order-detail-adjustment';
// let { NCModal,NCTabs } = base;
import './index.less';

const  { NCButton, NCTabs, NCPopover, NCModal, NCLoading } = base;
let NCTabPane = NCTabs.NCTabPane;
class Page extends Component {
    //待删除列表
    deleteList = {};
    orderDeleteList = {};
    //当前展示的发票列表数据 [{head: {head: {}}, body:{body: {}}}]  body是可选的
    invoiceList = [];
    //当前展示订单列表数据
    orderList = [];
    //当前选择表格条目 一级head
    checkedList = [];
    // 当前票袋活动pk主键
    ticketBagActiveId = 'all';
    // 发票和订单的tab值
    listTabStatus = '0'
    constructor(props) {
        super(props);
        setSearch(props, config.searchArea);
        props.use.form(config.walletListArea);
        props.use.search(config.searchArea);
        props.use.table(config.walletListArea);
        this.state = {
            multiLang: {},
            navTabStatus: '33',
            //上传控制
            showUploadInvoice: false,
            // 交易类型弹窗  
            showTradeType: false,
            // 发票明细调整弹窗  
            showDetail: false,
            // 订单明细调整弹窗  
            orderShowDetail: false,
            // 明细调整中明细类型
            fpmxType:[],
            // 是否显示右侧查验发票
            checkInvoceIsHidden: true,
            // appcode pagecode值
            codeVal: {},
            // 移动到显示列表
            showNCPopover: false,
            // 移动到按钮的列表加载数组
            ticketBagArr: [
                //     {
                //         "pk_erminvoice_bag":"all", // 唯一标志
                //         "bagname":"全部",// 票袋名称
                //         "pk_psndoc":"1001A51000000000301A",
                //         "pk_group":"0001A5100000000012MI",
                //         "pk_org":"0001A5100000000072UO",
                //         "dr":"0",
                //         "ts":"2022-05-1717:15:59",
                //         "valueIndex":{},
                //         "status":"0",
                //         "m_isDirty":false
                //     }
            ],
            // 移动到的票袋pk主键
            moveBagPk: null,
            // 是否显示移动到的确认提示框
            showMoveTagModal: false,
            // 移动到显示字符串的最大长度
            nCPopoverMoveShowValueMaxLength: 12,
            // 移动到的票袋名称
            moveBagName: null,
            showRotate: false,
            // tab标签数组
            tabData: [
				{ title: '待报销', key: '33' },
				{ title: '报销中', key: '36' },
				{ title: '已报销', key: '39' }
			],
            // 高度
            transfertableMain: 0,
            // 发票勾选的数组
            checkedList: [],
            // 订单勾选的数组
            orderCheckedList: []
        };
        // 获取票袋当前活动的pk主键
        this.getActiveId = this.getActiveId.bind(this);
        // 获取TableArea组件
        this.onTableAreaRef = this.onTableAreaRef.bind(this);
        // 查看发票界面关闭函数
        this.onHanleHiddenCheckInvoce = this.onHanleHiddenCheckInvoce.bind(this);
        // 
        this.queryNCPopoverMove = this.queryNCPopoverMove.bind(this);
        // 
        this.closeMoveTagModal = this.closeMoveTagModal.bind(this);
    }
    tradeTypeInstance = null

    componentDidMount() {
        this.initTempAndLang();
    }

    initTempAndLang() {
        const props = this.props;
        getMultiLang({
            ...config.multiLang,
            callback: (json) => {
                this.setState({multiLang: json}, () => {
                    let pagecode = this.listTabStatus === '0' ? config.pagecode : config.orderConfig.pagecode
                    props.createUIDom({pagecode}, (data) => {
                        console.log('=====template', data);
                        if(this.listTabStatus === '0') {
                            this.props.transferTable.setTransferTableValue(config.orderConfig.orderListArea, config.orderConfig.bodysArea, [], 'pk_ermorder', 'pk_ermorder_b');
                            this.setButton(data.button);
                            this.setMeta(data.template, data.button);
                            this.loadData(this.state.navTabStatus);
                        }
                        if(this.listTabStatus === '1') {
                            this.props.transferTable.setTransferTableValue(config.walletListArea, config.bodysArea, [], 'pk_erminvoice', 'pk_erminvoice_b');
                            this.setOrderMeta(data.template);
                            this.loadOrderData(this.state.navTabStatus);
                        }
                        let submitExpenseAccount = this.state.multiLang["submit_expense_account"];
                        let inReimbursement = this.state.multiLang["in_reimbursement"];
                        let haveSubmitExpenseAccount = this.state.multiLang["have_submit_expense_account"];
                        let tabData = [];
                        tabData.push({ title: submitExpenseAccount, key: '33' });
                        tabData.push({ title: inReimbursement, key: '36' });
                        tabData.push({ title: haveSubmitExpenseAccount, key: '39' });
                        this.setState({tabData});
                    });
                });
            }
        });
    }

    setMeta(meta, button) {
        const props = this.props;

        meta[config.walletListArea].pagination = true;
        meta[config.walletListArea].pageInfo = {
            pageSize: config.pageSize
        };

        const tableInnerButtons = props.button
            .getButtons()
            .filter((item) => item.area === config.innerButtonArea)
            .map((item) => item.key);
        if(this.state.navTabStatus === '36' || this.state.navTabStatus === '39') {
            tableInnerButtons.pop()
        }
        meta[config.walletListArea].items.push({
            label: this.state.multiLang['opr_title'],
            itemtype: 'customer',
            attrcode: 'opr',
            width: '140px',
            visible: true,
            fixed: 'right',
            render: (text, record, index) => {
                return props.button.createOprationButton(
                    tableInnerButtons.filter((item) => {
                        return true;
                    }),
                    {
                        area: config.innerButtonArea,
                        buttonLimit: 3,
                        onButtonClick: (props, key) => {
                            onTableInnerButtonClick.call(this, props, key, text, record, index);
                        }
                    }
                );
            }
        });
        //票夹表头开票日期去掉hh:mm:ss
        meta[config.walletListArea].items.forEach(item => {
            if(item.attrcode === 'kprq') {
                item.itemtype = 'datepicker'
            }
        })
        props.meta.setMeta(meta);
    }

    setOrderMeta(meta) {
        const props = this.props;
        meta[config.orderConfig.orderListArea].pagination = true;
        meta[config.orderConfig.orderListArea].pageInfo = {
            pageSize: config.orderConfig.pageSize
        };
        props.meta.setMeta(meta);
    }

    setButton(button) {
        const props = this.props;
        props.button.setButtons(button);
        props.button.setPopContent({
            delete_table_inner: this.state.multiLang['confirm_delete_select']
        });
    }

    loadData(key) {
        const props = this.props;
        const pageInfo = props.transferTable.getTablePageInfo(config.walletListArea);
        const meta = props.meta.getMeta();
        const activeId = this.ticketBagActiveId;
        let ticketBagType;
        if(activeId === 'all') {
            ticketBagType = 0
        }
        else if(activeId === 'other') {
            ticketBagType = 1
        }
        else {
            ticketBagType = 2
        }
        const pk_erminvoice_bag = {
            type: ticketBagType
        }
        if(ticketBagType === 2) {
            pk_erminvoice_bag['value'] = activeId
        }
        console.log(pk_erminvoice_bag,'pk_erminvoice_bag==')
        const data={
            querycondition:props.search.getAllSearchData(config.searchArea),
            pagecode: config.pagecode,
            pageInfo:{
                "pageIndex":pageInfo.pageIndex || 0,
                "pageSize": pageInfo.pageSize || 10,
            },
            queryAreaCode: config.searchArea,
            oid: meta[config.searchArea].oid,
            querytype:'tree'
        };

        const senddata = { 
            data, 
            pagecode: config.pagecode, 
            tepmid: meta.pageid, 
            purchaserstatus: key || '33'
        };
        if(key === '33') {
            senddata['pk_erminvoice_bag']  = pk_erminvoice_bag
        }

        return api.getWalletList(senddata).then((res) => {
            this.setState({
                showRotate: false
            })
            const data = _.get(res, 'data', []);
            const pageInfo = _.get(res, 'pageInfo', {});
            //先取消勾选
            this.props.transferTable.cancelRowsChecked(
                "head",
                Object.keys(this.deleteList)
            );
            this.deleteList = {};

            if(data && data.length > 0){
                data.forEach(item => {
                    if(!item.body) {
                        item.body = {body: {areacode: 'body', rows: []}}
                    }
                })
                const setData = {
                    rows: data,
                    pageInfo
                };
                if (pageInfo.pageIndex == 0) {
                    setData.allpks = new Array(Number(pageInfo.total));
                }
                this.invoiceList = data;
                data && this.props.transferTable.setTransferTableValue(config.walletListArea, config.bodysArea, setData, 'pk_erminvoice', 'pk_erminvoice_b');
            } else {
                this.props.transferTable.setTransferTableValue(config.walletListArea, config.bodysArea, [], 'pk_erminvoice', 'pk_erminvoice_b');
            }


            setTimeout(() => {
                let transfertableMain = document.getElementsByClassName('transfertable-main');
                let transfertableMainHeightNum = 0;
                if(!_.isEmpty(transfertableMain) && transfertableMain.length > 0){
                    if(_.isEmpty(this.state.transfertableMain) ||
                    this.state.transfertableMain === null ||
                    this.state.transfertableMain === 0){
                        transfertableMainHeightNum = Number(transfertableMain[0].style.height.replace('px',''));
                        this.setState({transfertableMain: transfertableMainHeightNum}); 
                    }
                         
                }
            },50)

        },() => {
            this.setState({
                showRotate: false
            })
        });
    }


    loadOrderData(key) {
        const props = this.props;
        const pageInfo = props.transferTable.getTablePageInfo(config.orderConfig.orderListArea);
        const meta = props.meta.getMeta();
        const data={
            querycondition:props.search.getAllSearchData(config.orderConfig.searchArea),
            pagecode: config.orderConfig.pagecode,
            pageInfo:{
                "pageIndex":pageInfo.pageIndex || 0,
                "pageSize": pageInfo.pageSize || 10,
            },
            queryAreaCode: config.orderConfig.searchArea,
            oid: meta[config.orderConfig.searchArea].oid,
            querytype:'tree'
        };

        let bxstatus;
        if(this.state.navTabStatus === '33') {
            bxstatus = 0
        }
        else if(this.state.navTabStatus === '36') {
            bxstatus = 1
        }
        else {
            bxstatus = 2
        }

        const senddata = { 
            data, 
            bxstatus
        };

        return api.getOrderList(senddata).then((res) => {
            this.setState({
                showRotate: false
            })
            const data = _.get(res, 'data', []);
            const pageInfo = _.get(res, 'pageInfo', {});
            //先取消勾选
            this.props.transferTable.cancelRowsChecked(
                "head",
                Object.keys(this.orderDeleteList)
            );
            this.orderDeleteList = {};

            if(data && data.length > 0){
                data.forEach(item => {
                    if(!item.body) {
                        item.body = {body: {areacode: 'body', rows: []}}
                    }
                })
                const setData = {
                    rows: data,
                    pageInfo
                };
                if (pageInfo.pageIndex == 0) {
                    setData.allpks = new Array(Number(pageInfo.total));
                }
                this.orderList = data;
                data && this.props.transferTable.setTransferTableValue(config.orderConfig.orderListArea, config.orderConfig.bodysArea, setData, 'pk_ermorder', 'pk_ermorder_b');
            } else {
                this.props.transferTable.setTransferTableValue(config.orderConfig.orderListArea, config.orderConfig.bodysArea, [], 'pk_ermorder', 'pk_ermorder_b');
            }


            // setTimeout(() => {
            //     let transfertableMain = document.getElementsByClassName('transfertable-main');
            //     let transfertableMainHeightNum = 0;
            //     if(!_.isEmpty(transfertableMain) && transfertableMain.length > 0){
            //         if(_.isEmpty(this.state.transfertableMain) ||
            //         this.state.transfertableMain === null ||
            //         this.state.transfertableMain === 0){
            //             transfertableMainHeightNum = Number(transfertableMain[0].style.height.replace('px',''));
            //             this.setState({transfertableMain: transfertableMainHeightNum}); 
            //         }
                         
            //     }
            // },50)

        },() => {
            this.setState({
                showRotate: false
            })
        });
    }

    // 删除列表发票
    onDeleteBill(record, index) {
        const list = []
        const { table } = this.props;
        list.push(_.get(record, 'pk_erminvoice.value', ''))
        api.deleteWallet({
            invoicePkList: list
        }).then((res) => {
            table.deleteTableRowsByIndex(config.walletListArea, index);
            this.loadData(this.state.navTabStatus);
            this.refreshLeftTicket();
            toast({
                color: 'success',
                content: this.state.multiLang['delete_success']
            });
        });
    }

    /**
     * @功能：获取“TableArea” 组件
     * @作者：Mr.sha
     * @日期：2022-06-10
     * @param {*} tableArea 
     */
    onTableAreaRef(tableArea){
        this.tableArea = tableArea;
    }

    /**
     * @功能：关闭右侧查看发票的显示div
     * @作者：Mr.sha
     * @日期：2022-06-13
     * @param {*} params  
     */
    onHanleHiddenCheckInvoce(params){
        this.setState({checkInvoceIsHidden: true});
    }

    /**
     * @功能：查看发票
     * @作者：Mr.sha
     * @日期：2022-06-10
     * @param {*} record 数据行数据
     * @param {*} index 下角标
     */
    onhandleChangeInvoice(record, index) {
       if(this && this.tableArea){
           this.setState({checkInvoceIsHidden: false});
           this.tableArea.onhandleChangeInvoice({invoiceDataObj: record, invoiceDataIndex: index});
           if(this.tableArea.checkInVoice && this.tableArea.checkInVoice.setImgUrl){
            this.tableArea.checkInVoice.setImgUrl({imgBaseUrl: null});
          }
       }
    }
    
    // 本地上传关闭
    closeUploadInvoice = () => {
        this.setState({showUploadInvoice: false})
    }

    // 交易类型弹窗关闭
    closeTradeType = () => {
        this.setState({showTradeType: false})
    }

    // 明细调整弹窗关闭
    closeDetail = (status) => {
        this.setState({showDetail: false})
        // this.checkedList = []
        this.setState({checkedList: []})
        this.props.transferTable.cancelRowsChecked(
            "head",
            Object.keys(this.deleteList)
        );
        this.loadData(this.state.navTabStatus)
    }

    // 明细调整弹窗显示
    openDetailDialog = () => {
        if(this.listTabStatus === '0') {
            this.setState({showDetail: true})
        }
        if(this.listTabStatus === '1') {
            this.setState({orderShowDetail: true})
        }
    }

    // 订单列表明细调整弹窗关闭
    closeOrderDetail = () => {
        this.setState({orderShowDetail: false})
        // this.checkedList = []
        this.setState({orderCheckedList: []})
        this.props.transferTable.cancelRowsChecked(
            "head",
            Object.keys(this.orderDeleteList)
        );
        this.loadOrderData(this.state.navTabStatus)
    }

    getDetailType = (data,codeVal) => {
        this.state.codeVal = codeVal;
        this.state.fpmxType = data.map(item => {
            const res = {};
            res.display = item.name;
            res.value = item.code;
            return res;
        })
    }
    /**
     * @功能：获取票袋当前活动pk主键
     * @作者：Mr.sha
     * @日期：2022-06-10
     * @param {*} params 
     */
    getActiveId(params) {
        let { activeId } = params;
        this.setState({ activeId,  showNCPopover: false});
        // this.queryBagMoveData(params)
        // this.setState({ activeId });

        this.ticketBagActiveId = activeId;
        this.loadData(this.state.navTabStatus);
    }

    //============================================================================移动到~~~开始

    /**
     * @功能: 移动到的显示文字
     * @作者：Mr.sha
     * @日期：2022-06-08
     * @returns 
     */
     getNCPopoverMoveShowValue(bagname) {
        let showBagname = bagname;
        if(showBagname && showBagname.length > this.state.nCPopoverMoveShowValueMaxLength){
            showBagname = showBagname.substring(0, this.state.nCPopoverMoveShowValueMaxLength) + "...";
        }
        return showBagname;
    }

    /**
     * @功能: 请求后端刷新~~~移动到按钮的列表html
     * @作者：Mr.sha
     * @日期：2022-06-08
     * @returns 
     */
    nCPopoverMoveContentDataTable() {
        return (
            <div colors="primary" className = 'move-content-arr' onMouseLeave = {
                () => {
                    this.setState({showNCPopover: false});
                }
              }>
                {
                    this.state.ticketBagArr.map((item, index) => {
                        return (
                            <div className = 'move-content' 
                                onClick = {()=>{
                                    this.handleMoveBag(item);
                                }}
                                key = {item.pk_erminvoice_bag}
                            >{this.getNCPopoverMoveShowValue(item.bagname)}</div>
                        )
                    })
                }
            </div>
        );
    }

    /*
    * @功能: 发票移动到票袋
    * @作者：Mr.sha
    * @日期：2022-06-06
    * @param {*} e 
    */
   handleMoveBag(params) {
       if(Object.keys(this.deleteList).length > 0) {
           // 勾选的数据
           let checkList = [];
           for(let delKey in this.deleteList){
               if(this.deleteList.hasOwnProperty(delKey) && _.get(this.deleteList, delKey,false)){
                   checkList.push(delKey);
               }
           }
           if(checkList && checkList.length === 0) {
               toast({content: this.state.multiLang["201103INUP-0032"] , color: 'warning'});
               return
           }
           this.setState({moveBagPk: params.pk_erminvoice_bag, moveBagName: params.bagname});
           promptBox({
            color: 'warning',
            title:                                     
                this.state.multiLang["201103INUP-0033"] && 
                this.state.multiLang["201103INUP-0033"]
                .replace("{checkListLength}",checkList.length)
                .replace("{moveBagName}",params.bagname)
            ,
            noFooter: false,
            noCancelBtn: false,
            // 确认按钮
            beSureBtnName: this.state.multiLang["2011-0003"],
            // 取消按钮
            cancelBtnName: this.state.multiLang["2011-0002"],
            // hasCloseBtn: true,
            // 确认事件
            beSureBtnClick: () => {this.confirmMoveTagModal(checkList)},
            // 取消事件
            cancelBtnClick: () => {this.closeMoveTagModal()}
            // ,
            // closeBtnClick: () => {this.closeMoveTagModal()}
            // ,
            // closeByClickBackDrop: true
          })
       } else {
           toast({content: this.state.multiLang["201103INUP-0032"] , color:'warning'});
       }
   }

    /**
     * @功能: 关闭移动到的确认框
     * @作者：Mr.sha
     * @日期：2022-06-08
     */
    closeMoveTagModal() {
        this.setState({showMoveTagModal: false, showNCPopover: false});
    }

     /**
     * @功能: 刷新左侧票袋列表
     * @作者：wenlingli
     * @日期：2022-06-17
     */
    refreshLeftTicket() {
        this.tableArea.refreshLeftTicket();
    }

    /**
     * @功能: 请求后端刷新~~~移动到按钮的列表html
     * @作者：Mr.sha
     * @日期：2022-06-08
     * @returns 
     */
    queryNCPopoverMove(params) {
        let { data } = params;
        this.setState({ticketBagArr: data});
    }
    

    /**
     * @功能: 确认移动到的操作
     * @作者：Mr.sha
     * @日期：2022-06-08
     * @checkList 勾选的数据
     */
    confirmMoveTagModal(checkList) {
        // 发票信息移动到的pk主键
        let pk_erminvoice_bag = this.state.moveBagPk;
        // // 暂时模拟赋值
        // this.setState({moveBagPk: null})
        if(Array.isArray(checkList) && checkList.length > 0) {
            let paramsAdd = null;
            // 参数
            const params = {...paramsAdd, invoices: checkList, pk_erminvoice_bag}
            this.closeMoveTagModal();
            this.tableArea.moveBagSend(params);

        } else {  
            toast({content: this.state.multiLang["201103INUP-0032"] , color: 'warning'});
        }
    }
    
    getMoveTagModalHtml() {
        this.state.multiLang['opr_title']
        return (
            <div>
                <NCModal size="sm" show={this.state.showMoveTagModal} >
                    <NCModal.Header closeButton>
                        <NCModal.Title>{this.state.multiLang["2011-0020"]}</NCModal.Title>
                    </NCModal.Header>
            
                    <NCModal.Body>
                        <div className = 'move-tag-modal-main'>
                            <div class="move-tag-modal-icon"></div>
                            <div class="move-tag-modal-right">
                                <div class="move-tag-modal-title">
                                    {
                                        this.state.multiLang["201103INUP-0033"] && 
                                        this.state.multiLang["201103INUP-0033"]
                                        .replace("{checkListLength}",Object.keys(this.deleteList).length)
                                        .replace("{moveBagName}",this.state.moveBagName)
                                    }
                                </div>
                            </div>
                        </div>
                    </NCModal.Body>
            
                    <NCModal.Footer>
                        <NCButton onClick={() => {this.confirmMoveTagModal()}} bordered>
                            {this.state.multiLang["2011-0003"]} 
                        </NCButton> 
                        <NCButton onClick={() => {this.closeMoveTagModal()}} colors="secondary" style={{ marginRight: 8 }}>
                            {this.state.multiLang["2011-0002"]}
                        </NCButton>
                    </NCModal.Footer>
                </NCModal>
            </div>
        );

    }
    //============================================================================移动到~~~结束

    /**
     * @功能: 设置去报销和移动到按钮隐藏
     * @作者：wenlingli
     * @日期：2022-06-18
     */
    setBtnVisible(isVisble) {
        this.props.button.setButtonsVisible({
            go_reimbursement: isVisble,
            move_wallet: isVisble
        });
    }

    setBtnAllVisible(isVisble) {
        this.props.button.setButtonsVisible({
            go_reimbursement: isVisble,
            move_wallet: isVisble,
            upload_invoice: isVisble,
            delete: isVisble
        });
    }

    setOrderBtnVisible(isVisble) {
        this.props.button.setButtonsVisible({
            move_wallet: isVisble,
            upload_invoice: isVisble,
            delete: isVisble
        });
    }

    setGoReimbursementBtnVisible(isVisble) {
        this.props.button.setButtonsVisible({
            go_reimbursement: isVisble
        });
    }

    render() {
        let { transferTable, button, search, modal, BillHeadInfo,table } = this.props;
        let { NCCreateSearch,getAllSearchData } = search;
        let { createBillHeadInfo } = BillHeadInfo;
        let { createTransferTable } = transferTable;
        this.getAllSearchData = getAllSearchData;//获取查询区所有字段数据

        return (
            <div className="nc-single-table">
                {/* 头部区域 */}
                <div className="nc-singleTable-header-area">
                    <div className="header-title-search-area">
                        {createBillHeadInfo({
                            title: this.state.multiLang['wallet_page_title'],
                            initShowBackBtn: false
                        })}
                    </div>
                    <div className="header-button-area">
                    <NCPopover className = 'move-tab-option' content={this.nCPopoverMoveContentDataTable()} trigger="click" 
                    placement="top" show = {this.state.showNCPopover}>
                        {button.createButtonApp({
                            area: config.pageButtonArea,
                            buttonLimit: 8,
                            onButtonClick: onPageButtonClick.bind(this)
                        })}
                        </NCPopover>
                    </div>
                </div>
                {/* 报销状态Tab切换 */}
                <div className='nc-singleTable-navTabs-area'>
                    <NCTabs
                        onChange={(key) => {
                            this.setState({
                                showRotate: true
                            },() => {
                                this.props.transferTable.setTransferTableValue(config.walletListArea, config.bodysArea, [], 'pk_erminvoice', 'pk_erminvoice_b');
                                this.props.transferTable.setTransferTableValue(config.orderConfig.orderListArea, config.orderConfig.bodysArea, [], 'pk_ermorder', 'pk_ermorder_b');
                                if(key === '33' && this.listTabStatus === '0') {
                                    this.setBtnAllVisible(true)
                                }
                                if((key === '36' || key === '39') && this.listTabStatus === '0') {
                                    this.setBtnVisible(false)
                                }

                                if(key === '33' && this.listTabStatus === '1') {
                                    this.setGoReimbursementBtnVisible(true)
                                    this.setOrderBtnVisible(false)
                                }
                                if((key === '36' || key === '39') && this.listTabStatus === '1') {
                                    this.setBtnAllVisible(false)
                                }
                                this.setState({ navTabStatus: key,checkInvoceIsHidden: true })
                                this.initTempAndLang()
                            });
                        }}
                        animated={false}
                    >
                        {this.state.tabData.map((item,index) => {
                                return <NCTabPane tab={item.title} key={item.key}></NCTabPane>
                            })
                        }
                    </NCTabs>
                </div>
                {/* 搜索区域 */}
                <SearchArea NCCreateSearch={NCCreateSearch} that={this}/>
                {/* 发票列表格区域 */}
                {this.listTabStatus === '0' && <TableArea
                    onTableAreaRef = {this.onTableAreaRef} 
                    createTransferTable={createTransferTable} 
                    getActiveId = {this.getActiveId} that={this}
                    checkInvoceIsHidden = {this.state.checkInvoceIsHidden}
                    onHanleHiddenCheckInvoce = {this.onHanleHiddenCheckInvoce}
                    queryNCPopoverMove = {this.queryNCPopoverMove}
                    moveBagPk = {this.state.moveBagPk}
                    showMoveTagModal = {this.state.showMoveTagModal}
                    closeMoveTagModal = {this.closeMoveTagModal}
                    navTabStatus = {this.state.navTabStatus}
                    multiLang = {this.state.multiLang}
                    transfertableMain = {this.state.transfertableMain}
                />}
                {this.listTabStatus === '1' && <OrderTableArea
                    createTransferTable={createTransferTable}
                    navTabStatus = {this.state.navTabStatus}
                    that={this}
                />}
                {/* 发票上传 */}
                <NCModal size="xlg" 
                    show={this.state.showUploadInvoice} 
                    keyboard={false}
                    onHide={this.closeUploadInvoice}>
                    <NCModal.Header closeButton="true">
                        <NCModal.Title >{this.state.multiLang['wallet-upload']}</NCModal.Title>
                    </NCModal.Header>
                    <NCModal.Body>
                        <UploadInvoice 
                            hide={this.closeUploadInvoice.bind(this)} 
                            parentProps = {this.props}
                            that={this}
                            multiLang={this.state.multiLang}
                        />
                    </NCModal.Body>
                </NCModal>
                {/* 交易类型 */}
                <NCModal
                    show={ this.state.showTradeType } 
                    keyboard={false}
                    onHide={ this.closeTradeType }>
                    <NCModal.Header closeButton="true">
                        <NCModal.Title >{this.state.multiLang['trade_type_title']}</NCModal.Title>
                    </NCModal.Header>
                    <NCModal.Body>
                        <TradeTypeModal 
                            visible={this.state.showTradeType}
                            table={table}
                            close={this.closeTradeType}
                            onShowDetail={this.openDetailDialog}
                            detailType={this.getDetailType}
                            checkedList={this.listTabStatus === '0' ? this.state.checkedList : this.state.orderCheckedList}
                            that={this}
                        />
                    </NCModal.Body>
                </NCModal>
                 {/* 明细调整 */}
                 <NCModal
                    show={ this.state.showDetail } 
                    keyboard={false}
                    onHide={ this.closeDetail }>
                    <NCModal.Header closeButton="true">
                        <NCModal.Title >{this.state.multiLang['detail_adjustment']}</NCModal.Title>
                    </NCModal.Header>
                    <NCModal.Body>
                        <DetailAdjustment 
                            visible={this.state.showDetail}
                            table={table}
                            close={this.closeDetail}
                            fpmxType={this.state.fpmxType}
                            checkedList={this.state.checkedList}
                            codeVal={this.state.codeVal}
                        />
                    </NCModal.Body>
                </NCModal>
                {/* 订单列表明细调整 */}
                <NCModal
                    show={ this.state.orderShowDetail } 
                    keyboard={false}
                    onHide={ this.closeOrderDetail }>
                    <NCModal.Header closeButton="true">
                        <NCModal.Title >{this.state.multiLang['detail_adjustment']}</NCModal.Title>
                    </NCModal.Header>
                    <NCModal.Body>
                        <OrderDetailAdjustment 
                            visible={this.state.orderShowDetail}
                            table={table}
                            close={this.closeOrderDetail}
                            fpmxType={this.state.fpmxType}
                            checkedList={this.state.orderCheckedList}
                            codeVal={this.state.codeVal}
                        />
                    </NCModal.Body>
                </NCModal>
                <NCLoading
                    fullScreen
                    showBackDrop={true}
                    // loadingType="line"
                    show={this.state.showRotate}
                />
                {this.getMoveTagModalHtml()}
            </div>
        );
    }
}

export default createPage({
    mutiLangCode: config.mutiLangCode,
    initTemplate: null
})(Page);
